<template>
<div class="welcome">
   <!-- 搜索和添加
      <el-row :gutter="20" class="input-search">
        <el-col :span="10">
          <el-input placeholder="请输入内容" class="input-with-select" v-model="queryInfo.query" clearable @clear="getUserList">
          <template #append>
            <el-button slot="append"  type="primary" @click="getUserList" icon="Search"></el-button>
            </template>
          </el-input>

       </el-col>
        <el-col :span="4">
          <el-button class="add-but" type="primary"  @click="dialogFormVisible = true" ><Search/>添加用户
          </el-button>
        </el-col>
      </el-row>-->
      <!-- 表单 -->
      <el-form :inline="true"   class="demo-form-inline" >
    <el-form-item label="姓名" label-width="100px">
      <el-input v-model="queryInfo.pname" placeholder="请输入姓名" />
    </el-form-item>
    <el-form-item label="职位" label-width="100px">
      <el-select v-model="queryInfo.postName" placeholder="请输入职位">
      <el-option label="Frontend Developer" value="Frontend" />
      <el-option label="BackEnd Developer" value="BackEnd" />
      <el-option label="Tester" value="Tester" />
      <el-option label="Business Analysis" value="Business Analysis" />
      </el-select>
    </el-form-item>
    <el-form-item label="所在项目" label-width="100px">
          <el-input v-model="queryInfo.proName" placeholder="请输入所在项目" />
        </el-form-item>
        <el-form-item label="职级" label-width="100px">
          <el-select v-model="queryInfo.rankName" class="m-2" placeholder="请选择">
            <el-option label="Leader" value="Leader" />
            <el-option label="Employee" value="Employee" />
          </el-select>
        </el-form-item>
        <el-form-item label="当前状态" label-width="100px">
          <el-select v-model="queryInfo.status" class="m-2" placeholder="请选择">
            <el-option label="On Project" value="On Project" />
            <el-option label="Bench" value="Bench" />
            <el-option label="On leave" value="On leave" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门" label-width="100px">
          <el-select v-model="queryInfo.deptName" class="m-2" placeholder="请选择">
            <el-option label="CSD" value="CSD" />
            <el-option label="I&D" value="I&D" />
            <el-option label="ERP" value="ERP" />
          </el-select>
        </el-form-item>
        <el-form-item label="入职日期" label-width="100px">
      <el-col :span="11">
        <el-date-picker
          type="date"
          style="width: 300px"
          v-model="queryInfo.createTime"
        />
      </el-col>
      <!-- <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-date-picker
          placeholder="结束时间"
          style="width: 100%"
          v-model="queryInfo.endTime"
        />
      </el-col> -->
    </el-form-item>
      <el-button slot="append" type="primary" @click="getUserList">查询</el-button>
      <el-button type="primary" @click="resetForm">重置</el-button>
      <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
  </el-form>

  <!-- 用户数据展示框 -->
  <el-card class="box-card" slot-scoped="scoped">
    <span class="card-span"> 人员查询</span>
    <el-table :data="userList" style="width: 100%">
        <el-table-column label="NO" type="index"></el-table-column>
        <el-table-column label="姓名" prop="pname" ></el-table-column>
        <el-table-column label="职位" prop="postName"></el-table-column>
        <el-table-column label="状态" prop="status"></el-table-column>
        <el-table-column label="所在项目" prop="proName"></el-table-column>
        <el-table-column label="入职日期" prop="createTime"></el-table-column>
        <el-table-column label="部门" prop="deptName"></el-table-column>
        <!-- <el-table-column label="联系方式" prop="mobile"></el-table-column> -->
        <el-table-column label="操作">
        <template #default="scope">
        <el-button type="warning" round @click="editUserByid(scope.row.pid) ">修改</el-button>
        <el-button type="danger" round @click="removeUserById(scope.row.pid)">删除</el-button>
        </template>
        </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="demo-pagination-block">
      <!-- eslint-disable-next-line -->
    <el-pagination v-model:current-page="userList.page"  v-model:page-size="userList.pageSize"
      :page-sizes= [5,10]
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
     </el-card>
  <!-- 添加用户弹出对话框 -->
  <el-dialog v-model="dialogFormVisible" title="添加人员" width="50%" @close="addDialogClosed">
    <el-form :model="addform" :rules="welcomeFormRules" ref = "refForm" >
     <el-form-item prop="pname" label="姓名" label-width="100px">
          <el-input v-model="addform.pname"  ></el-input>
      </el-form-item>
      <el-form-item prop="postName" label="职位" label-width="100px">
        <el-select   v-model="addform.postName">
          <el-option label="Frontend Developer" value="Frontend" />
          <el-option label="BackEnd Developer" value="BackEnd" />
          <el-option label="Tester" value="Tester" />
          <el-option label="Business Analysis" value="Business Analysis" /></el-select>
      </el-form-item>
      <el-form-item prop="createTime" label="入职日期" label-width="100px">
          <el-input   v-model="addform.createTime"></el-input>
      </el-form-item>
      <el-form-item prop="deptName" label="部门" label-width="100px">
          <el-select   v-model="addform.deptName">
             <el-option label="CSD" value="CSD" />
            <el-option label="I&D" value="I&D" />
            <el-option label="ERP" value="ERP" /></el-select>
      </el-form-item>
      <el-form-item prop="pphone" label="手机号" label-width="100px">
          <el-input   v-model="addform.pphone"></el-input>
      </el-form-item>
      <el-form-item prop="pemail" label="邮箱" label-width="100px">
          <el-input   v-model="addform.pemail"></el-input>
      </el-form-item>
      </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="adduser">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 修改用户弹出对话框 -->
  <el-dialog v-model="editDialogVisible" title="修改用户" width="50%" >
    <el-form :model="editForm" :rules="welcomeFormRules" ref = "refForm" >
      <el-form-item prop="pname" label="姓名" label-width="100px">
          <el-input v-model="editForm.pname" disabled ></el-input>
      </el-form-item>
      <el-form-item prop="postName" label="职位" label-width="100px">
        <el-select   v-model="editForm.postName">
          <el-option label="Frontend Developer" value="Frontend" />
          <el-option label="BackEnd Developer" value="BackEnd" />
          <el-option label="Tester" value="Tester" />
          <el-option label="Business Analysis" value="Business Analysis" /></el-select>
      </el-form-item>
      <el-form-item prop="createTime" label="入职日期" label-width="100px">
          <el-input   v-model="editForm.createTime"></el-input>
      </el-form-item>
      <el-form-item prop="deptName" label="部门" label-width="100px">
          <el-select   v-model="editForm.deptName">
             <el-option label="CSD" value="CSD" />
            <el-option label="I&D" value="I&D" />
            <el-option label="ERP" value="ERP" /></el-select>
      </el-form-item>
      <el-form-item prop="pphone" label="手机号" label-width="100px">
          <el-input   v-model="editForm.pphone"></el-input>
      </el-form-item>
      <el-form-item prop="pemail" label="邮箱" label-width="100px">
          <el-input   v-model="editForm.pemail"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser">确 定</el-button>
      </span>
      </el-dialog>
  </div>
</template>
<script>
import { ref, reactive, toRefs } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
// import { query } from 'express'
export default {
  setup() {
    const state = reactive({
      // 用户列表数据
      userList: [],
      // 查询用户的参数对象
      queryInfo: {
        // pname: ''
      //   // query: '',
      //   // page: 1, // 页码
      //   // pageSize: 10// 单页显示数据条数
      },
      total: 0,
      welcomeFormRules: {
        pname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { max: 10, message: '长度不能超过 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        pphone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        pemail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
            message: '邮箱格式不正确',
            trigger: 'blur'
          }
        ]
      },
      // 修改按钮的表单数据对象
      editForm: {}

    })
    // 获取用户数据列表
    const getUserList = async function () {
      const { data: res } = await axios.post('/people/page',
        {
          page: 1,
          pageSize: 10,
          pname: state.queryInfo.pname,
          postName: state.queryInfo.postName,
          proName: state.queryInfo.proName,
          status: state.queryInfo.status,
          rankName: state.queryInfo.rankName,
          deptName: state.queryInfo.deptName,
          beginTime: state.queryInfo.beginTime,
          endTime: state.queryInfo.endTime,
          createTime: state.queryInfo.createTime
        }

      )
      state.userList = res.data.records
      state.queryInfo = state.userList
      console.log(state.queryInfo)
      // console.log(res)
      // state.total = res.data.total
      console.log(state.userList)
      state.total = res.data.total
    }
    getUserList()
    // 分页
    const handleSizeChange = (pageSize) => {
      state.userList.pagesize = pageSize
      getUserList()
    }
    const handleCurrentChange = (page) => {
      state.userList.page = page
      getUserList()
    }
    // 添加用户
    const refForm = ref(null)
    const dialogFormVisible = ref(false)
    const addform = reactive({
      pphone: '',
      pname: '',
      deptName: '',
      postName: '',
      createTime: '',
      pemail: ''
    })
    // 确认按钮点击事件
    const adduser = () => {
      refForm.value.validate(async (valid) => {
        if (!valid) {
          return
        }
        const { data: res } = await axios.post('people/save', addform) // eslint-disable-line no-unused-vars
        if (res.code !== 200) {
          return ElMessage({
            message: '添加人员信息失败',
            type: 'error'
          })
        }
        ElMessage({
          message: '添加用户成功',
          type: 'success'
        })
        getUserList()
        dialogFormVisible.value = false
      })
    }
    // 添加用户事件结束后清空表单
    const addDialogClosed = () => {
      addform.username = ''
      addform.password = ''
      addform.mobile = ''
    }
    // 删除按钮点击事件
    const removeUserById = (pid) => {
      ElMessageBox.confirm(
        '是否确定删除该用户？',
        '删除用户',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          const { data: res } = await axios.delete(`people/${pid}`) // eslint-disable-line no-unused-vars
          if (res.code !== 200) {
            return ElMessage({
              message: res.message,
              type: 'error'
            })
          }
          ElMessage({
            message: '删除用户成功',
            type: 'success'
          })
          getUserList()
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
    // 修改用户数据
    const editDialogVisible = ref(false)

    // 修改按钮点击事件
    const editUserByid = async (pid) => {
      const { data: res } = await axios.get(`people/${pid}`) // eslint-disable-line no-unused-vars
      console.log(res)
      if (res.code !== 200) {
        return ElMessage({
          message: '获取用户信息失败',
          type: 'error'
        })
      }
      state.editForm = res.data
      console.log(state.editForm)
      editDialogVisible.value = true
    }
    // 修改用户数据
    const editUser = () => {
      refForm.value.validate(async (valid) => {
        if (!valid) {
          return
        }
        // eslint-disable-next-line
        const { data: res } = await axios.put('/people/update',
          {
          // const { data: res } = await axios.put(`/people/update/${state.editForm.pid}`, {
            pid: state.editForm.pid,
            pphone: state.editForm.pphone,
            pname: state.editForm.pname,
            deptName: state.editForm.deptName,
            postName: state.editForm.postName,
            createTime: state.editForm.createTime,
            pemail: state.editForm.pemail
          })
        console.log(res)
        if (res.code !== 200) {
          return ElMessage({
            message: res.message,
            type: 'error'
          })
        }
        editDialogVisible.value = false
        getUserList()
        ElMessage({
          type: 'success',
          message: '用户信息已刷新'
        })
      })
    }
    // 重置
    const resetForm = () => {
      state.queryInfo = ''
      getUserList()
    }
    return {
      getUserList,
      ...toRefs(state),
      dialogFormVisible,
      addform,
      adduser,
      addDialogClosed,
      removeUserById,
      editUserByid,
      editDialogVisible,
      editUser,
      refForm,
      handleSizeChange,
      handleCurrentChange,
      // 表单
      resetForm
    }
  }
}

</script >
<style lang="less" scoped>
.demo-form-inline{
.el-form-item{
  margin:20px;
  width:400px;
  .el-select{
  width:400px;
  }
}
}
.welcome{
  height:100%;
  width:100%
}
.input-search{
  display:flex;
  justify-content:center
}
.input-with-select{
height:50px
}
.box-card{
  margin: 20px auto;
  width:100%;
  height:70%;
  .card-span{
  font-size:24px;
  font-weight:700;
  }
  .el-table{
    margin-top:50px
  }
}
span{
  margin: auto 20px;
}
.add-but{
  height:50px
}
.el-form-item{
  margin-right:0
}

</style>
